<template>
	<view class="info">
		<view class="qrcode" id="qrcode">
			<view class="qrcode__head">
				<view>
					<my-avatar :src="user.avatarUrl" :size="50"></my-avatar>
				</view>
				<view class="qrcode__head-text">
					<text style="font-size: 18px;font-weight: bold;">{{user.nickName}}</text>
					<text
						style="font-size: 13px;color: #ccc;">{{user.address && JSON.parse(user.address).slice(0, 2).join(' ')}}</text>
				</view>
			</view>
			<view class="qrcode__main">
				<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :size="size" :queue="true" :value="text" :options="{
					foregroundImageSrc: '/static/img/other/weixin.jpg',
			        foregroundImageWidth: size * 0.25,
			        foregroundImageHeight: size * 0.25,
			        foregroundImagePadding: 4,
			        foregroundImageBorderRadius: 4,
			        foregroundImageShadowBlur: 50,
			        foregroundImageShadowColor: 'rgba(0, 0, 0, 0.68)'}">
				</uqrcode> -->
				<image style="width: 500rpx;height: 500rpx;" :src="baseUrl.qrcodeImg + user.id + '.jpg'"
					mode="scaleToFill">
				</image>
				<view class="tips">
					<text class="text">扫一扫上面的二维码图案，加我为好友</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onNavigationBarButtonTap,
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		useUserStore,
	} from '@/stores/user';
	import {
		storeToRefs,
	} from 'pinia';
	import {
		baseUrl,
	} from '@/common/base';

	let pages = getCurrentPages();
	let page = pages[pages.length - 1];
	let currentWebview = page.$getAppWebview();

	const users = useUserStore();
	let {
		user,
	} = storeToRefs(users);

	let text = ref(JSON.stringify({
		'userId': user.value.id,
	}));
	let size = ref(uni.upx2px(500));

	const capture = () => {
		let bitmap = null;
		bitmap = new plus.nativeObj.Bitmap('qrcode');
		// 将webview内容绘制到Bitmap对象中
		currentWebview.draw(bitmap, function(e) {
			console.log('截屏绘制图片成功', e);
			bitmap.save(`_doc/jyhqrcode${Date.now()}.jpg`, {}, function(i) {
				console.log('保存图片成功：' + JSON.stringify(i));
				uni.saveImageToPhotosAlbum({
					filePath: i.target,
					success: function() {
						bitmap.clear(); //销毁Bitmap图片
						uni.showToast({
							title: '保存图片成功',
							mask: false,
							duration: 1500
						});
					}
				});
			}, function(e) {
				console.log('保存图片失败：' + JSON.stringify(e));
			});
		}, function(e) {
			console.log('截屏绘制图片失败：' + JSON.stringify(e));
		});
		//currentWebview.append(amway_bit);
	}

	onNavigationBarButtonTap((e) => {
		if (e.type == 'menu') {
			uni.showActionSheet({
				itemList: ['保存图片'],
				success: function(res) {
					switch (res.tapIndex) {
						case 0:
							capture();
							break;
						default:
							break;
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
		}
	});
</script>

<style lang="scss" scoped>
	.info {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding-top: 50px;
		padding: 100px 125rpx 0;
		background-color: #f7f7f7;

		.qrcode {
			width: 100%;
			padding: 50px 0;
			background-color: #f7f7f7;

			&__head {
				display: flex;

				&-text {
					padding: 5rpx 0;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}
			}

			&__main {
				margin-top: 50rpx;

				.tips {
					margin-top: 20px;
					text-align: center;

					.text {
						font-size: 13px;
						color: #ccc;
					}
				}
			}
		}
	}
</style>
